<template>
  <div class="app-container">
    <div class="layout-content">
      <el-table
        ref="multipleTable"
        :data="
          tableData.filter(
            (data) =>
              !search || data.name.toLowerCase().includes(search.toLowerCase())
          )
        "
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          class="selection"
          align="center"
        />
        <el-table-column label="模型" prop="img" width="100px" align="center">
          <template #default="scope">
            <img :src="scope.row.img" alt="" style="margin: 0 auto" />
          </template>
        </el-table-column>
        <el-table-column label="日期" width="110px" prop="date" />
        <el-table-column label="描述" prop="des" min-width="150px" />
        <el-table-column label="模型名字" prop="modeName" width="100px" />
        <el-table-column label="作者" prop="author" width="80px" />
        <el-table-column label="状态" prop="staus" width="190px" align="center">
          <template #default="scope">
            <el-space size="5px">
              <el-tag
                v-show="scope.row.state"
                closable
                @close="handleWeekClose(scope.$index, tableData)"
                >周推荐</el-tag
              >
              <el-tag
                v-show="scope.row.state2"
                type="success"
                closable
                @close="handleRecommendClose(scope.$index, tableData)"
                >喜欢推荐</el-tag
              >
            </el-space>
          </template>
        </el-table-column>
        <el-table-column align="center" width="230px" label="操作" prop="coor">
          <template #default="scope">
            <el-button size="mini">查看</el-button>

            <el-popconfirm
              confirm-button-text="喜欢推荐"
              cancel-button-text="周推荐"
              confirmButtonType="success"
              cancelButtonType="Primary"
              hide-icon
              title="设置标签"
              @confirm="setLikedRecommend(scope.$index, scope.row)"
              @cancel="setWeekRecommend(scope.$index, scope.row)"
            >
              <template #reference>
                <el-button type="info" size="mini">设置</el-button>
              </template>
            </el-popconfirm>

            <!-- <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            type="info"
            >设置</el-button
          > -->

            <el-popconfirm
              confirm-button-text="确认"
              cancel-button-text="取消"
              :icon="InfoFilled"
              icon-color="red"
              title="设置标签"
              @confirm="handleDelete(scope.$index, tableData)"
              @cancel="cancelEvent(scope.$index, tableData)"
            >
              <template #reference>
                <el-button type="danger" size="mini">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <div class="table-bottom">
        <el-button
          size="medium"
          type="info"
          :disabled="setButtonState"
          class="setButton"
          @click="selectWeekAllcc"
          >周推荐</el-button
        >
        <el-button
          size="medium"
          type="info"
          :disabled="setLikedButtonState"
          class="setLikedButton"
          @click="selectLikedAllcc"
          >喜欢推荐</el-button
        >
        <div v-show="!listLoading" class="pagination-container">
          <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>
        </div>
      </div>
      <!-- <Dialog
      :flag="dialogFlag"
      :tableList="currentTableList"
      @close="closeDialog"
      @submit="sureDialogInfo"
    /> -->
    </div>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
// import Dialog from "@/components/dialog.vue";
import fac from "@/assets/images/face.jpg";
export default {
  name: "publish_module",
  //   components: { Dialog },
  setup() {
    const search = ref("");
    const total = ref("100");
    const setButtonState = ref(false);
    const setLikedButtonState = ref(false);
    const sureButtonstate = ref(false);
    const listLoading = ref(false);
    const dialogVisible = ref(false);
    // 获取用户的选中
    const multipleSelection = ref("");
    // 弹窗flag
    // true、false
    const dialogFlag = ref(false);

    const listQuery = reactive({
      pageNum: 1,
      pageSize: 10,
      importance: undefined,
      title: undefined,
      type: undefined,
      sort: "+id",
    });
    const tableData = reactive([
      {
        img: fac,
        date: "2016-05-01",
        des: "这是一个模型啊啊啊",
        name: "Jessy",
        maker: "Tom",
        state: true,
        state2: true,
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        img: fac,
        date: "2016-05-01",
        des: "这是一个模型啊啊啊",
        name: "Jessy",
        maker: "Tom",
        state: false,
        state2: true,
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        img: fac,
        date: "2016-05-01",
        des: "这是一个模型啊啊啊",
        name: "Jessy",
        maker: "Tom",
        state: true,
        state2: true,
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        img: fac,
        date: "2016-05-01",
        des: "这是一个模型啊啊啊",
        name: "Jessy",
        maker: "Tom",
        state: false,
        state2: true,
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        img: fac,
        date: "2016-05-01",
        des: "这是一个模型啊啊啊",
        name: "Jessy",
        maker: "Tom",
        state: true,
        state2: false,
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        img: fac,
        date: "2016-05-01",
        des: "这是一个模型啊啊啊",
        name: "Jessy",
        maker: "Tom",
        state: false,
        state2: false,
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        img: fac,
        date: "2016-05-01",
        des: "这是一个模型啊啊啊",
        name: "Jessy",
        maker: "Tom",
        state: true,
        state2: false,
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        img: fac,
        date: "2016-05-01",
        des: "这是一个模型啊啊啊",
        name: "Jessy",
        maker: "Tom",
        state2: false,
        state: false,
        address: "No. 189, Grove St, Los Angeles",
      },
    ]);
    const currentTableList = reactive({
      rows: "",
      number: "",
      which: "",
    });

    function handleDelete(index, rows) {
      rows.splice(index, 1);
    }

    function cancelEvent(index, rows) {
      console.log("取消了");
    }

    function handleSizeChange(val) {
      listQuery.limit = val;
    }
    function handleCurrentChange(val) {
      listQuery.page = val;
    }

    // 关标签
    function closeDialog() {
      dialogFlag.value = false;
    }
    function sureDialogInfo(tableListInfo) {
      dialogFlag.value = false;
      // 关闭对应的周推荐或者喜欢推荐
      if (tableListInfo.which == "week") {
        tableListInfo.rows[tableListInfo.number].state = false;
      }
      if (tableListInfo.which == "liked") {
        tableListInfo.rows[tableListInfo.number].state2 = false;
      }
    }
    const handleWeekClose = (index, rows) => {
      dialogFlag.value = true;
      currentTableList.rows = rows;
      currentTableList.number = index;
      currentTableList.which = "week";
      // rows[index].state = false;
    };
    function handleRecommendClose(index, rows) {
      dialogFlag.value = true;
      currentTableList.rows = rows;
      currentTableList.number = index;
      currentTableList.which = "liked";
      // rows[index].state2 = false;
    }

    // 设置标签
    function setLikedRecommend(index, rows) {
      rows.state2 = true;
    }
    function setWeekRecommend(index, rows) {
      rows.state = true;
    }

    // 判断是否有选中项
    function handleSelectionChange(value) {
      console.log(value.length);
      multipleSelection.value = value;
      // if (multipleSelection.value.length >= 1) {
      //   setButtonState.value = false;
      //   console.log('11111111111')
      // }else {
      //   setButtonState.value = true;
      //         console.log('2222222222')
      // }
    }

    // 多选操作周推荐
    function selectWeekAllcc() {
      multipleSelection.value.forEach((item) => {
        item.state = true;
      });
    }

    function selectLikedAllcc() {
      multipleSelection.value.forEach((item) => {
        item.state2 = true;
      });
    }

    return {
      // 常量
      search,
      setButtonState,
      listLoading,
      setLikedButtonState,
      dialogFlag,
      dialogVisible,
      sureButtonstate,
      total,
      multipleSelection,
      // 对象
      tableData,
      listQuery,
      currentTableList,

      // 方法

      handleDelete,
      handleSizeChange,
      handleWeekClose,
      handleRecommendClose,
      closeDialog,
      sureDialogInfo,
      setLikedRecommend,
      setWeekRecommend,
      cancelEvent,
      handleSelectionChange,
      selectWeekAllcc,
      selectLikedAllcc,
    };
  },
};
</script>
<style lang="scss">
// .pagination-container {
//   margin-top: 50px;
// }
.layout-content {
  .table-bottom {
    position: relative;
    margin-top: 50px;
    .setButton {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;

      width: 100px;
      text-align: center;
    }
    .setLikedButton {
      position: absolute;
      top: 0;
      left: 110px;
      display: flex;
      justify-content: center;

      width: 100px;
      text-align: center;
    }
    .pagination-container {
      padding-top: 10px;
    }
  }
}
</style>
